<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>webSocket</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/sockjs.min.js"></script>
    <script src="js/stomp.js"></script>
</head>

<body>
    <div>
        <input type="text" id="curUserId" style="margin-bottom: 10px;"></button>
    </div>
    <div>
        <button id="connect">连接</button>
        <button id="disconnect" disabled="disabled">断开</button>
    </div>
    <div>
        <h3>广播形式</h3>
        <button id="broadcastButton">发送</button><input id="broadcastText" type="text">
        <label>广播消息：</label>
        <textarea style="width: 400px;" rows="6" cols="20" id="broadcastMsg" disabled="disabled"></textarea>
    </div>
    <div>
        <h3>订阅形式</h3>
        <label>订阅消息：</label><input id="subscribeMsg" type="text" disabled="disabled">
    </div>
    <div>
        <h3>角色形式</h3>
        <button id="userButton">发送</button><input id="userText" type="text">
        <label>用户消息：</label>
        <textarea style="width: 400px;" rows="6" cols="20" id="userMsg" disabled="disabled"></textarea>
    </div>
    <div>
        <h3>无APP</h3>
        <button id="appButton">发送</button><input id="appText" type="text">
        <label>前端消息：</label><input id="appMsg" type="text" disabled="disabled">
    </div>
</body>
<script>
    var stomp = null;
    $("#connect").click(function () {
        var url = "http://10.14.2.27:19160/ws"
        var socket = new SockJS(url, null, { timeout: 30000 });
        stomp = Stomp.over(socket);
        var userId = $("#curUserId").val();
        //连接
        stomp.connect({ userId: userId }, function (frame) {
            //订阅广播
            stomp.subscribe("/topic/broadcast", function (res) {
                $("#broadcastMsg").val(res.body);
            });
            //订阅，一般只有订阅的时候在返回
            stomp.subscribe("/app/subscribe/1", function (res) {
                $("#subscribeMsg").val(res.body);
            });
            //用户模式
            stomp.subscribe("/user/topic/todo", function (res) {
                $("#userMsg").val(res.body);
            });
            //无APP
            stomp.subscribe("/topic/app", function (res) {
                $("#appMsg").val(res.body);
            });
            setConnect(true);
        });
    });

    $("#disconnect").click(function () {
        if (stomp != null) {
            stomp.disconnect();
        }
        setConnect(false);
    });
    //设置按钮
    function setConnect(connectStatus) {
        $("#connect").attr("disabled", connectStatus);
        $("#disconnect").attr("disabled", !connectStatus);
    }

    //发送广播消息
    $("#broadcastButton").click(function () {
        stomp.send("/app/broadcast", {}, JSON.stringify({ "body": $("#broadcastText").val() }))
    });

    //发送用户消息
    $("#userButton").click(function () {
        stomp.send("/app/one", {}, JSON.stringify({ "body": $("#userText").val() }))
    });

    //发送web消息
    $("#appButton").click(function () {
        stomp.send("/topic/app", {}, JSON.stringify({ "body": $("#appText").val() }))
    });
</script>

</html>